<template>
  <div
    class="tool-container"
    :style="isSmall ? 'right: 46px;' : 'right: 57px'"
    :class="{ isSmall, footerIsShow: !footerIsShow }"
    @click.stop
  >
    <div v-if="isOpen" class="first">
      <div
        class="tool-container-box waring"
        v-if="waringVisible"
        @click.stop="waringClick"
      >
        预警事件
      </div>
      <div
        class="tool-container-box flyPlan"
        v-if="flyPlanVisible"
        @click.stop="flyPlanClick"
      >
        飞行计划
      </div>
    </div>
    <div v-if="isOpen" class="second topBox">
      <div
        class="tool-container-box-small"
        :class="isWaring == true ? 'waringShowActive' : 'waringShow'"
        @click.stop="waringShowClick"
      >
        <!--        预警演示-->
      </div>
      <div
        class="tool-container-box-small"
        :class="toolStore.isSearch == true ? 'searchBoxActive' : 'searchBox'"
        @click.stop="searchClick"
      >
        <!--        高度查询-->
      </div>
      <div
        class="tool-container-box-small"
        :class="isRanging == true ? 'rangingActive' : 'ranging'"
        @click.stop="rangingClick"
      >
        <!--        测距-->
      </div>
    </div>
    <div class="control">
      <div
        class="tool-container-box"
        :class="isOpen == true ? 'controlOpen' : 'controlClose'"
        @click.stop="openControl"
      >
        工具箱
      </div>
      <div
        class="tool-container-box"
        :class="isDefaultView == false ? 'defaultView' : 'defaultViewActive'"
        id="defaultPer"
        @click.stop="defaultPerspective"
      >
        默认视角
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps } from "vue";
import useToolTabStore from "@/store/modules/toolTab";
const props = defineProps({
  isSmall: {
    type: Boolean,
    default: false,
  },
  footerIsShow: {
    type: Boolean,
    default: false,
  },
});

const toolStore = useToolTabStore();
const isRanging = ref(false);
const isWaring = ref(false);
const isOpen = ref(false);
const isDefaultView = ref(true);
const waringVisible = ref(false);
const flyPlanVisible = ref(false);
const clickVisible = ref(false);

const emit = defineEmits([
  "flyPlanClose",
  "waringClose",
  "ranging",
  "rangingClose",
  "heightSearch",
  "defaultPerspect",
  "waringShowView",
  "waringShowViewClose",
]);

function flyPlanClick() {
  flyPlanVisible.value = false;
  emit("flyPlanClose");
}

function waringClick() {
  waringVisible.value = false;
  emit("waringClose");
}

function flyPlanClickStop() {
  flyPlanVisible.value = false;
}

function waringClickStop() {
  waringVisible.value = false;
}

function defaultMouse() {
  if (!clickVisible.value) {
    isDefaultView.value = false;
  } else {
    clickVisible.value = false;
  }
}

function defaultZoomEnd() {
  clickVisible.value = false;
  isDefaultView.value = true;
}

function defaultPerspective() {
  clickVisible.value = true;
  isDefaultView.value = true;
  emit("defaultPerspect");
}

function waringShowClick() {
  isWaring.value = !isWaring.value;
  if (isWaring.value === true) {
    emit("waringShowView");
  } else {
    emit("waringShowViewClose");
  }
}

function searchClick() {
  toolStore.changeSearch();
  if (!toolStore.isSearch) {
    emit("heightSearch", null, null, true);
  }
}

function openControl() {
  isOpen.value = !isOpen.value;
  if (isOpen.value === false) {
    console.log(isWaring.value);
    if (isWaring.value === true) {
      isWaring.value = false;
      emit("waringShowViewClose");
    }
    if (toolStore.isSearch === true) {
      toolStore.isSearch = false;
      emit("heightSearch", null, null);
    }
    if (isRanging.value === true) {
      isRanging.value = false;
      emit("ranging", isRanging.value);
    }
  }
  // if (isOpen.value === true) {
  //   emit("waringShowView");
  // } else {
  //   emit("waringShowViewClose");
  // }
}

function rangingClick() {
  isRanging.value = !isRanging.value;
  emit("ranging", isRanging.value);
}

function controlFlyPlan() {
  flyPlanVisible.value = true;
}

function controlWaring() {
  waringVisible.value = true;
}

function defaultChange() {
  isDefaultView.value = false;
}

defineExpose({
  controlFlyPlan,
  controlWaring,
  waringClickStop,
  flyPlanClickStop,
  defaultChange,
  defaultMouse,
  defaultZoomEnd,
});
</script>
<style lang="scss" scoped>
.tool-container {
  width: 100px;
  min-height: 100px;
  position: absolute;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  right: 46px;
  bottom: 35%;
  z-index: 10;

  .topBox {
    width: 55px;
    height: 203px;
    border-radius: 10px;
    border: 1px solid #286e92;
    background: rgba(8, 44, 63, 0.3);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
  }

  .tool-container-box {
    width: 100px;
    height: 110px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #cccccc;
    display: flex;
    justify-content: center;
    align-items: end;
    cursor: pointer;
  }

  .tool-container-box-small {
    width: 70px;
    height: 70px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #cccccc;
    display: flex;
    justify-content: center;
    align-items: end;
    cursor: pointer;
  }

  .ranging {
    //width: 100px;
    //height: 100px;
    background: url("/img/cockpit/cejv.png");
    //background-size: 100% 100%;
  }
  .ranging:hover {
    background: url("/img/cockpit/cejvActive.png");
    color: rgba(223, 148, 2, 1);
  }
  .rangingActive {
    background: url("/img/cockpit/cejvActive.png");
    color: rgba(223, 148, 2, 1);
  }

  .defaultView {
    background: url("/img/cockpit/defaultView.png");
    color: #cccccc;
  }
  .defaultViewActive {
    background: url("/img/cockpit/defaultViewActive.png");
    color: rgba(223, 148, 2, 1);
  }
  .defaultView:hover {
    background: url("/img/cockpit/defaultViewActive.png");
    color: rgba(223, 148, 2, 1);
  }

  .searchBox {
    background: url("/img/cockpit/FDJ.png") no-repeat;
  }
  .searchBox:hover {
    background: url("/img/cockpit/FDJActive.png") no-repeat;
    color: rgba(223, 148, 2, 1);
  }
  .searchBoxActive {
    background: url("/img/cockpit/FDJActive.png") no-repeat;
    color: rgba(223, 148, 2, 1);
  }

  .waringShow {
    background: url("/img/cockpit/waring3.png");
  }

  .waringShow:hover {
    background: url("/img/cockpit/waring3Active.png");
    color: rgba(223, 148, 2, 1);
  }
  .waringShowActive {
    background: url("/img/cockpit/waring3Active.png");
    color: rgba(223, 148, 2, 1);
  }

  .controlOpen {
    background: url("/img/cockpit/controlClose.png");
    color: rgba(223, 148, 2, 1);
  }

  .controlClose {
    background: url("/img/cockpit/controlOpen.png");
    color: #ccc;
  }

  .controlClose:hover {
    background: url("/img/cockpit/controlClose.png");
    color: #ccc;
  }

  .waring {
    background: url("/img/cockpit/waring.png");
    color: rgba(223, 148, 2, 1);
  }
  .flyPlan {
    background: url("/img/cockpit/flyPlan.png");
    color: rgba(223, 148, 2, 1);
  }
}

.tool-container.isSmall {
  right: 100px;
  height: 250px;
  bottom: 48%;
  flex-wrap: wrap;
}

.tool-container.footerIsShow {
  bottom: 12%;
}
</style>
